<template>
  <div class="bg">
    <nav-com
      title="物流详情"
      :showView='true'
      @back="backHandler()"
    ></nav-com>
    <!-- <div>
      <iframe
        :src="info.RouteMapUrl"
        frameborder="0"
        width="100%"
        :style="{height:'50vh','z-index':-1}"
        scrolling="auto"
      ></iframe>
    </div> -->
    <!-- <div
      class="send-people"
      v-if="info.DeliveryMan"
    >
      <div>{{info.DeliveryMan}}</div>
      <div class="phone">{{info.DeliveryManTel}}<span
          class="copy"
          @click="copy(info.DeliveryManTel)"
        >复制手机号</span></div>
      
    </div> -->
    <div class="express-info">
      <div style="margin:5vw 0">
        <div v-if="dataInfo.item[0].express_name" ><span style="color:#07c160">{{dataInfo.item[0].express_name}}</span>：{{dataInfo.item[0].express_no}}</div>
        <div v-else>{{dataInfo.status_desc}}</div>
      </div>
      <div>订单编号：{{dataInfo.order_sn}}</div>
      <div>收货地址：{{ dataInfo.province_name }}{{ dataInfo.city_name
            }}{{ dataInfo.area_name }}{{ dataInfo.address }}</div>
      <div v-if="infoList.length==0">物流信息：无</div>
    </div>
    <div class="address-list">
      <!-- <div class="title">
        <span class="tab">境内</span>
        {{dataInfo.item[0].express_name}} {{dataInfo.item[0].express_no}}
        <span
          class="copy"
          @click="copy(dataInfo.item[0].express_no)"
        >复制</span>
      </div> -->
      <!-- <div
        class="no-data"
        v-if="infoList.length==0"
      >--暂无信息--</div> -->
      <van-steps
        direction="vertical"
        :active="0"
      >
        <van-step
          v-for="(item, index) in infoList"
          :key="index"
        >
          <h4>{{item.AcceptStation}}</h4>
          <p>{{item.AcceptTime}}</p>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script>
import navCom from "@/component/nav";
import { geOrderDetail } from "@/api/api";
import { expressDetail } from "@/api/areaApi";
import { Toast } from "vant";
export default {
  components: {
    navCom,
  },
  data() {
    return {
      url: "",
      infoList: [],
      dataInfo: {},
    };
  },
  async created() {
    this.id = this.$route.params.id;
    await this.initGoodsData();
    this.getExpressInfo();
  },
  computed: {
    //计算属性 , 设置iframe高度为窗口高度少100px
    calHeight() {
      return window.innerHeight - 500 + "px";
    },
  },
  methods: {
    backHandler() {
      this.$router.go(-1);
    },
    async initGoodsData() {
      await geOrderDetail({ id: this.id })
        .then((res) => {
          if (res.data.code == 1) {
            this.dataInfo = res.data.data;
            console.log(88888, this.dataInfo);
            this.time = res.data.data.countdown * 1000;
            //  this.time = 300000;
          }
        })
        .catch((err) => {});
    },
    copy(val) {
      this.$copyText(val)
        .then((result) => {
          Toast("复制成功");
        })
        .catch((err) => {
          Toast("复制失败");
        });
    },
    getExpressInfo() {
      let queryData = {
        orderCode: this.dataInfo.order_sn,
        username: this.dataInfo.consignee,
        shipperCode: this.dataInfo.item[0].express_code,
        logisticCode: this.dataInfo.item[0].express_no,
        senderCityName: "",
        receiverCityName: this.dataInfo.city_name,
      };
      expressDetail(queryData)
        .then((result) => {
          console.log(result.data);
          let list = result.data.data.Traces
          this.infoList = list.reverse();
          this.url = result.data.RouteMapUrl;
          console.log(this.infoList);
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.bg{
  background: #fff;
}
.express-info{
  padding: 0 5vw;
  font-size: 14px;
  line-height: 6vw;
}
.send-people {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 86vw;
  margin: 0 2vw;
  background: #fff;
  border-radius: 2vw;
  z-index: 100001;
  height: 10vw;
  margin-bottom: 1vw;
  padding: 5vw;
}
.send-people .phone {
  margin-top: 5px;
}
.send-people .phone .copy {
  float: right;
  background: #d1d2d5;
  color: #fff;
  padding: 2px 3px;
  font-size: 12px;
}
.address-list {
  background: #fff;
}
.address-list .title {
  padding: 5vw;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}
.address-list .title .tab {
  border: 1px solid #fa2c1e;
  color: #fa2c1e;
  font-size: 14px;
  margin-right: 10px;
  font-weight: 400;
}
.address-list .title .copy {
  float: right;
  font-weight: 400;
  background: #d1d2d5;
  color: #fff;
  padding: 2px 3px;
  font-size: 14px;
}
.address-list .no-data {
  margin: 20vw auto;
  text-align: center;
}
</style>